<script setup lang="ts">
import Banner from "@/components/banner/Banner.vue";
import Download from "@/components/banner/Download.vue";
import ComponentsTabBar from "@/components/components_tabbar/ComponentsTabBar.vue";
import {useStore} from "@/store";
import {computed, ComputedRef, onMounted, Ref, ref, watch} from "vue";
import ListWindowItem from "@/components/show_item/ListWindowItem.vue";
import LoginBox from "@/components/login/LoginBox.vue";
import UserBox from "@/components/login/UserBox.vue";
import {getCookie} from "@/until/cookie";
import RecommendSongsOfTheDayItem from "@/components/show_item/RecommendSongsOfTheDayItem.vue";
import PanBox from "@/components/show_item/panbox/PanBox.vue";
import TopList from "@/components/top_list/TopList.vue";
import {debounce} from "@/tool/tool";

const store = useStore();
//通过vuex获取用户是否登陆
const isLogin = computed(() => store.state.login.isLogin);
const titles = [
  {url: "SingList", name: "华语"},
  {url: "SingList", name: "流行"},
  {url: "SingList", name: "摇滚"},
  {url: "SingList", name: "民谣"},
  {url: "SingList", name: "电子"},
];
//封装懒加载axios的方法

const lazyLoadAxios = (divElement: Ref<HTMLDivElement>, callback: (...args: any) => any, ...indicator: any) => {
  const debounceCallback = debounce(callback, 500);
  if (indicator.every((item: any) => item === undefined) &&
    divElement.value.getBoundingClientRect().top < windowHeight.value
    && divElement.value.getBoundingClientRect().top !== 0) {
    // callback()
    debounceCallback();
  }
};
//通过vuex发送网络请求获取hotRecommend的数据的方法
const getHotRecommend = () => {
  lazyLoadAxios(hotRecommend,
    () => store.dispatch("recommend/getIncompletePersonalized", {
      limit: 8,
      cookie: getCookie(),
    }), store.state.recommend.IncompletePersonalized);
};
//通过vuex发送网络请求获取recommendedListOfTheDay的数据的方法
const getRecommendedListOfTheDay = () => {
  if (isLogin.value) {
    lazyLoadAxios(personalRecommendation,
      () => {
        store.dispatch("recommend/getRecommendedListOfTheDay", getCookie());
      },
      store.state.recommend.recommendedListOfTheDay);
  }
};
//通过vuex发送网络请求获取newAlbumList的数据的方法
const getNewAlbumList = () => {
  lazyLoadAxios(panBox,
    () => {
      store.dispatch("recommend/getNewAlbumList", {cookie: getCookie(), limit: 10, offset: 0});
    },
    store.state.recommend.newAlbumList);
};
//通过vuex发送网络请求获取topList数据的方法
const getTopList = () => {
  lazyLoadAxios(topList,
    () => {
      store.dispatch("global/getTopList", getCookie());
    },
    store.state.global.soaringList,
    store.state.global.newSongList,
    store.state.global.list,
    store.state.global.OriginalList,
  );

};
//获取hotRecommend的DOM元素
const hotRecommend: Ref<HTMLDivElement> = ref((null as unknown) as HTMLDivElement);
//获取personalRecommendation的DOM元素
const personalRecommendation: Ref<HTMLDivElement> = ref((null as unknown) as HTMLDivElement);
//获取panBox的DOM元素
const panBox: Ref<HTMLDivElement> = ref((null as unknown) as HTMLDivElement);
//获取榜单的DOM元素
const topList: Ref<HTMLDivElement> = ref((null as unknown) as HTMLDivElement);
//从vuex中获取可视窗口的高度
const windowHeight = computed(() => store.state.window.windowHeight);
//从vuex获取y轴滚动的距离
const windowPageYOffset = computed(() => store.state.window.windowPageYOffset);
//生命钩子，意义为recommend组件加载完毕后判断是否满足加载hotRecommend的条件
onMounted(() => {
  getHotRecommend();
  getRecommendedListOfTheDay();
  getNewAlbumList();
  getTopList();
});
//监控可视窗口的变化
watch(windowHeight, () => {
  getHotRecommend();
  getRecommendedListOfTheDay();
  getNewAlbumList();
  getTopList();
});
//监控滚动发生
watch(windowPageYOffset, () => {
  getHotRecommend();
  getRecommendedListOfTheDay();
  getNewAlbumList();
  getTopList();
});
watch(isLogin, (newValue) => {
  if (store.state.recommend.IncompletePersonalized !== undefined) {
    store.dispatch("recommend/getIncompletePersonalized", {limit: 8, cookie: getCookie()});
  }
  setTimeout(() => {
    if (newValue) {
      getRecommendedListOfTheDay();
    } else {
      store.commit("recommend/DELETE_RECOMMENDED_LIST_OF_THE_DAY");
    }
  });
});
//通过vuex获取推荐歌单的信息
const IncompletePersonalized = computed(() => (store.state.recommend.IncompletePersonalized) ?? 8);
//通过vuex获取每日推荐歌单的信息
const recommendedListOfTheDay = computed(() => (store.state.recommend.recommendedListOfTheDay) ?? 3);

//通过vuex获取新碟上架数据
const newAlbumList = computed(() => (store.state.recommend.newAlbumList) ?? 10);


const soaringList: any = computed(() => (store.state.global.soaringList) ?? 10);
const newSongList: any = computed(() => (store.state.global.newSongList) ?? 10);
const original: any = computed(() => (store.state.global.OriginalList) ?? 10);
const allList = computed(() => (store.state.global.list) ?? []);

//榜单相关
export interface CoverImgAndNameInterface {
  coverImgUrl: string;
  name: string;
}

export interface dataInterface {
  id: number;
  name: string;
}
</script>
<template>
  <div class="recommend_main_container">
    <!--   左部分-->
    <div style="border-left: 1px solid #95a5a6;border-right: 1px solid #95a5a6">
      <banner></banner>
      <div class="main_right_content_container">
        <div>
          <!--        热门推荐的表头-->
          <components-tab-bar m-url="SingList"
                              :point-show=true
                              m-title-class="m_title"
                              m-title-content="热门推荐"
                              :s-title="titles"
                              more-message="更多"
          ></components-tab-bar>
          <!--        热门推荐的内容-->
          <div ref="hotRecommend" style="box-sizing: border-box">
            <list-window-item :items="IncompletePersonalized"></list-window-item>
          </div>
        </div>
        <div>
          <!--          个性推荐-->
          <div v-show="isLogin">
            <!--        个性推荐的表头-->
            <components-tab-bar m-url="SingList"
                                :point-show=true
                                m-title-class="m_title"
                                m-title-content="个性推荐"></components-tab-bar>
            <div style="display: flex" ref="personalRecommendation">
              <div style="padding-right: 40px">
                <recommend-songs-of-the-day-item></recommend-songs-of-the-day-item>
              </div>
              <div style="width: 508px">
                <list-window-item :items="recommendedListOfTheDay"></list-window-item>
              </div>
            </div>
          </div>
        </div>
        <!--        新碟上架-->
        <div>
          <!--          新碟上架表头-->
          <components-tab-bar m-url="SingList"
                              :point-show=true
                              m-title-class="m_title"
                              m-title-content="新碟上架"
                              more-message="更多"></components-tab-bar>
          <!--          新碟上架内容-->
          <div ref="panBox">
            <pan-box :new-album-list="newAlbumList"></pan-box>
          </div>
        </div>
        <!--        榜单-->
        <div>
          <!--          榜单表头-->
          <components-tab-bar m-url="SingList"
                              :point-show=true
                              m-title-class="m_title"
                              m-title-content="榜单"
                              more-message="更多"></components-tab-bar>
          <!--          榜单内容-->
          <div ref="topList" style="padding-top: 20px;display: grid;grid-template-columns: repeat(3, 1fr)">
            <top-list :data="soaringList"
                      name="飙升榜"></top-list>
            <top-list :data="newSongList"
                      name="新歌榜"></top-list>
            <top-list :data="original"
                      name="原创榜"></top-list>
          </div>
        </div>
      </div>
    </div>
    <!--    右部分-->
    <div style="border-right: 1px solid #95a5a6">
      <!--      推广下载-->
      <download></download>
      <!--      用户登陆成功后显示的盒子-->
      <user-box v-if="isLogin"></user-box>
      <!--      用户登陆盒子-->
      <login-box v-else></login-box>
    </div>
  </div>
</template>
<style scoped lang="scss">
.recommend_main_container {
  display: grid;
  grid-template-columns: repeat(2, 730px 250px);

  .main_right_content_container {
    padding: 20px 20px 40px;
  }
}
</style>
